<template>
  <div class="cs-page-container">
    <BasicInfo :detail="detail" :list="list" @refresh="doSearch" />
    <el-tabs v-model="activeTab" type="border-card" style="margin-top:20px">
      <el-tab-pane label="个人信息" name="0">
        <keep-alive>
          <AccountInfo v-if="activeTab == 0" :list="list" :detail="detail" @refresh="doSearch" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="背包" name="1">
        <keep-alive>
          <Bag v-if="activeTab == 1" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          充值消耗
          <el-badge :value="detail.richValue/100" class="item">
          </el-badge>
        </span>
        <keep-alive>
          <Recharge v-if="activeTab == 2" :list="list" :detail="detail" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="收益提现" name="3">
        <span slot="label">
          收益提现
          <el-badge :value="detail.withdrawalMoney/10000" class="item">
          </el-badge>
        </span>
        <keep-alive>
          <IncomeWithdraw v-if="activeTab == 3" :list="list" :detail="detail" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="聊天收送礼" name="4">
        <keep-alive>
          <Gift v-if="activeTab == 4" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="属性变化" name="5">
        <keep-alive>
          <PropChange v-if="activeTab == 5" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="行为日志" name="6">
        <keep-alive>
          <ActionLog v-if="activeTab == 6" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="聊天记录" name="7">
        <keep-alive>
          <ChattingRecords v-if="activeTab == 7" :user-id="userId" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="动态" name="8">
        <keep-alive>
          <dynamicList v-if="activeTab == 8" :user-id="userId" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="评论" name="9">
        <keep-alive>
          <commentList v-if="activeTab == 9" :user-id="userId" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="积分" name="10">
        <keep-alive>
          <AccountProp v-if="activeTab == 10" :user-id="userId" prop-type="积分+" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="钻石" name="11">
        <keep-alive>
          <AccountProp v-if="activeTab == 11" :user-id="userId" prop-type="钻石" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="亲密度" name="12">
        <keep-alive>
          <Intimacy v-if="activeTab == 12" :user-id="userId" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="搭讪文案" name="13">
        <keep-alive>
          <accostWriting v-if="activeTab == 13" :user-id="userId" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="聊天会话" name="14">
        <keep-alive>
          <ImMsgSession v-if="activeTab == 14" :from-user-id="userId" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import BasicInfo from './components/BasicInfo'
import AccountInfo from './components/AccountInfo'
import Bag from './components/Bag'
import Recharge from './components/Recharge'
import IncomeWithdraw from './components/IncomeWithdraw'
import Gift from './components/Gift'
import PropChange from './components/PropChange'
import ActionLog from './components/ActionLog'
import ChattingRecords from './components/ChattingRecords'
import dynamicList from '@/views/anchor/dynamicList/post'
import commentList from '@/views/anchor/dynamicList/commentList'
import AccountProp from './components/AccountProp';
import Intimacy from './components/intimacy'
import accostWriting from './components/accostWriting'
import ImMsgSession from '@/views/anchor/chatRecord/components/imMsgSession'

import { xhrAccountDetail, xhrAccountList } from '@/api/account'
export default {
  components: {
    BasicInfo,
    AccountInfo,
    Bag,
    Recharge,
    IncomeWithdraw,
    Gift,
    PropChange,
    ActionLog,
    ChattingRecords,
    dynamicList,
    AccountProp,
    commentList,
    Intimacy,
    accostWriting,
    ImMsgSession
  },
  data() {
    const query = this.$route.query
    return {
      activeTab: 0,
      userId: (query && query.id) || null,
      detail: {},
      list: []
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      xhrAccountDetail({
        userId: this.userId
      })
        .then(resp => {
          this.detail = resp.data
        })
        .catch(err => {
          this.$message.error(err)
        })

      xhrAccountList({
        userId: this.userId,
        pageNum: 1,
        pageSize: 100,
        offset: 0,
        page: 1
      })
        .then(resp => {
          this.list = resp.data.list
        })
        .catch(err => {
          this.$message.error(err)
        })
    }
  }
}
</script>
<style lang="scss">
.cs-detail-info {
  width: 100%;
  td {
    padding: 5px 10px;
    font-size: 14px;
  }
}
.cs-detail-card {
  td {
    padding: 5px 20px 5px 10px;
  }
}
.el-card__body{
  overflow: auto;
}
</style>
